function initSelectEventListener() {
    let hs_select_btn_arr = document.getElementsByClassName("hs-select-group");
    let index = 0;
    while(index < hs_select_btn_arr.length) {
        /**
         * 为下拉选项按钮设置鼠标悬浮事件
         */
        let select_btn = hs_select_btn_arr.item(index++)
        select_btn.addEventListener("mouseover", function (evt) {
            let ul = this.lastElementChild;
            if(ul != undefined) {
                ul.setAttribute("style", "display:block");
            }
        }, false);
        /**
         * 为下拉选项按钮设置鼠标移除事件
         */
        select_btn.addEventListener("mouseout", function (evt) {
            let ul = this.lastElementChild;
            if(ul != undefined) {
                ul.setAttribute("style", "display:none");
            }
        }, false);

        /**
         * 为下拉选项框中的 ul 中的 li元素设置点击事件
         */
            // 获取 ul 中所有 li 标签
        let li_items = select_btn.lastElementChild.children;

        if (li_items != undefined) {
            let li_index = 0;
            while(li_index < li_items.length) {
                // 为 li 标签绑定点击事件
                li_items.item(li_index++).addEventListener("click", function (evt) {
                    let btn = this.parentElement.parentElement.firstElementChild;
                    // 改变下拉选项框按钮的 文本值
                    btn.innerText = this.innerText;
                    // 将选项的值存入到 按钮 的 data-hp-val 属性中
                    btn.setAttribute("data-hp-val", this.getAttribute("data-hp-val"));

                    if (btn.getAttribute("data-hp-id")) {
                        // 将选项的值放入到 input 框中
                        let input_id = document.getElementById(btn.getAttribute("data-hp-id"));
                        if (input_id) {
                            input_id.setAttribute("value", this.getAttribute("data-hp-val"));
                        }
                    }
                    // 隐藏 ul（下拉列表）
                    this.parentElement.setAttribute("style", "display:none");
                }, false);
            }
        }
    }
    // [1, 2, 3].forEach(function(value, index, array){
    //     // 参数：value数组中的当前项, index当前项的索引, array原始数组；
    //     // 数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
    //     // 理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组；
    //     console.log(value)
    // })
}

// function initEmoji() {
//     /**
//      * 阻止事件冒泡
//      * @param evt
//      */
//     function stopBubble(evt) {
//         if (evt && evt.stopPropagation) {
//             //因此它支持W3C的stopPropagation()方法
//             evt.stopPropagation();
//         } else {
//             //否则，我们需要使用IE的方式来取消事件冒泡
//             window.event.cancelBubble = true;
//         }
//     }
//
//     /**
//      * emoji插件开始的地方
//      * 使用emoji插件时，需要在触发显示emoji面板的 元素上添加 id="emoji"
//      * 同时，需要将该元素设置为 {position: relative;}
//      *
//      * 例如：
//      * <span id="emoji">
//      *     <img :src="emoji"/>
//      * </span>
//      *
//      * 这时 emoji 就会被插入 在 id="emoji" 的span 标签的第一个子元素位置上
//      * @type {HTMLElement}
//      */
//     let emoji = document.getElementById("emoji");
//
//     if (emoji) {
//         emoji.insertAdjacentHTML('afterbegin',
//             '<div id="emoji-board">表情插件模块还在施工当中......</div>')
//
//         emoji.addEventListener("click", function (evt) {
//             stopBubble(evt)
//             let emoji_board = document.getElementById("emoji-board");
//             if (emoji_board) {
//                 emoji_board.style = "display: block";
//             }
//         })
//     }
//
//     // 对 document 绑定 点击事件
//     document.addEventListener("click", function (evt) {
//         stopBubble(evt)
//         // 获取需要 显示或者隐藏 的待处理的 目标控件
//         let emoji_board = document.getElementById("emoji-board");
//         if (emoji_board) {
//             // 在点击整个页面时，如果目标控件控件存在，
//             // 判断 被点击的的控件是否被 目标控件包含
//             // 如果不被包含，则表示点击到目标控件外头了;
//             // 简单地说，目标控件被点中时，ev.target 就是目标控件，
//             if (!emoji_board.contains(evt.target)) {
//                 emoji_board.style = "display: none";
//             }
//         }
//     })
// }

/**
 * 设置博客内容中各代码的样式
 */
function initBlogCodeCss() {
    // 设置所有html 代码的样式
    // 获取所有pre 标签的元素
    // 给所有pre 表桥的元素添加滚动条样式 的 code-scrollbar class
    // 判断pre标签中元素的类型 ： 如java 代码，html 代码等，根据不同类型绑定不同样式
    let eles = document.getElementsByTagName("pre");

    let index = 0;
    while (index < eles.length) {
        let ele = eles.item(index++);
        // 设置样式的滚动条
        ele.classList.add("code-scrollbar");
        if(ele.getAttribute("class").includes("brush:html;toolbar:false")) {
            // todo
        }
        if(ele.getAttribute("class").includes("brush:java;toolbar:false")) {
            // todo
        }
    }
}

window.onload = function (ev) {
    console.log("loading hp-ui ....");
    initSelectEventListener();
    initBlogCodeCss();
}


/**
 * 与样式无关的框架
 *
 */


/**
 * 删除指定元素的功能性函数
 */
function removeAllChild(id)  {
    var div = document.getElementById(id);

    while(div.hasChildNodes()) { //当div下还存在子节点时 循环继续
        div.removeChild(div.firstChild);
    }
}